<template>
	<view class="gwc">
		<view class="gwc_item" v-for="(item,index) in gwc" :key="item.id">
			<view class="box">
				<!-- <view class="en">
					<radio @click="checkeditem" :checked="checked"></radio>
				</view> -->
				<view class="img">
					<image :src="item.small_image"></image>
				</view>
				<view class="shopinfo">
					<view class="shoptitle">{{item.product_name}}</view>
					<view class="shopspec">{{item.spec}}</view>
					<view class="price">￥{{item.price}}</view>
				</view>
				
				<view class="nums">
					<view class="nums_item">
						<button plain="true" :disabled="item.num==1" @click="sub(item)">-</button>
						<view>{{item.num}}</view>
						<button plain="true" @click="zeng(item)">＋</button>
					</view>
				</view>
				
				<view class="delete" @click="deletes(item)">
					<image src="../../static/delete.png"></image>
				</view>
			</view>
		</view>
		<view class="show" v-if="Object.keys(gwc).length == 0">
			<image src="../../static/kongshop.png"></image>
			<view>购物车空空如也~</view>
		</view>
		<view class="over">
			<view class="flexbox">
				<text class="zprice">合计: ￥{{sum}}</text>
				<button type="warn" >结算</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				// checked: false
			}
		},
		onLoad() {
			setInterval(()=>{
				this.$store.commit('sum')
			},500)
		},
		computed:{
			...mapState(["gwc","sum"])
		},
		methods: {
			...mapMutations(['sub','zeng','deletes'])
		}
	}
</script>

<style lang="scss">
	.gwc {
		view {
			box-sizing: border-box;
		}
		padding-bottom: 100rpx;
		.gwc_item {
			position: relative;
			height: 245rpx;
			border-bottom: 1px solid #F8F8F8;
			
			.box {
				display: flex;
				padding: 20rpx;

				.en {
					width: 100rpx;
					height: 200rpx;
					line-height: 200rpx;
					text-align: center;
				}

				.img {
					width: 200rpx;
					height: 200rpx;
					overflow: hidden;
					border-radius: 15rpx;
					box-shadow: 0 2rpx 2rpx 2rpx rgba(0, 0, 0, 0.1);

					image {
						width: 100%;
						height: 100%;
					}
				}

				.shopinfo {
					padding: 10rpx 20rpx 20rpx 20rpx;

					.shoptitle {
						font-size: 30rpx;
						margin-bottom: 10rpx;
						width: 400rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.shopspec {
						color: #999;
						font-size: 25rpx;
						width: 450rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					
					.price{
						color: #d81e06;
						margin-top: 53rpx;
						font-size: 35rpx;
					}
				}

				.nums {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					padding: 10rpx;

					.nums_item {
						display: flex;
						width: 250rpx;
						height: 60rpx;
						border: 1px solid #F8F8F8;
						// box-shadow: 0 2rpx 1rpx 1rpx rgba(0, 0, 0, 0.05);

						button {
							flex: 1;
							height: 100%;
							border: 0;
							// font-size: 40rpx;
							text-align: center;
							line-height: 60rpx;
						}
						view {
							flex: 2;
							line-height: 60rpx;
							text-align: center;
							font-size: 30rpx;
							border-left: 1px solid #F8F8F8;
							border-right: 1px solid #F8F8F8;
						}
					}
				}
				.delete{
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					width: 70rpx;
					height: 70rpx;
					text-align: center;
					line-height: 70rpx;
					image{
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

		}
		.show{
			text-align: center;
			padding: 40rpx;
			image{
				width: 300rpx;
				height: 200rpx;
			}
			view{
				margin-top: 20rpx;
				color: #cccccc;
				font-size: 30rpx;
			}
		}
		.over{
			position: fixed;
			bottom: 0rpx;
			width: 100%;
			height: 100rpx;
			background-color: #f4f4f4;
			.flexbox{
				
				.zprice{
					position: absolute;
					left: 260rpx;
					top: 35rpx;
					color: #d81e06;
					font-weight: 700;
					font-size: 35rpx;
				}
				button{
					position: absolute;
					right: 50rpx;
					top: 15rpx;
					color: #fff;
					width: 175rpx;
					height: 75rpx;
					border: 0;
					line-height: 75rpx;
					border-radius: 40rpx;
					// background-color: #d81e06;
				}
			}
		}
	}
</style>
